<template>
  <div class="task-arrangement">
    <div class="action-bar">
      <div class="bar-left">
        <div class="bar-add">
          <span class="el-icon-document-add" @click="openFileDialog">
            新增</span
          >
        </div>
        <div class="bar-delete">
          <span class="iconfont icon-shanchu" @click="deleteTaskArr">
            删除</span
          >
        </div>
        <div class="bar-synch">
          <span class="el-icon-monitor" @click="addCallSyncTask"> 同步</span>
        </div>
      </div>
      <div class="bar-right">
        <div class="bar-test">
          <span>数据集名称：</span>
          <el-input
            v-model="searchData.dataSetName"
            placeholder="请输入数据集名称"
          >
          </el-input>
        </div>
        <div class="bar-dataSetType">
          <span>数据集类型：</span>
          <el-select
            v-model="searchData.dataSetType"
            placeholder="请选择数据集类型"
            clearable
          >
            <el-option label="话音" value="1"></el-option>
            <el-option label="数据" value="2"></el-option>
            <el-option label="视频" value="3"></el-option>
          </el-select>
        </div>
        <div class="bar-testStartTime">
          <span>数据文件名：</span>
          <el-input
            v-model="searchData.fileName"
            placeholder="请输入数据文件名"
          >
          </el-input>
        </div>
        <div class="bar-search">
          <span @click="searchTask">搜索</span>
        </div>
      </div>
    </div>
    <div class="display-table">
      <div class="display-table-content">
        <el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          :header-cell-style="{
            textAlign: 'center',
            background: '#013770',
            color: '#1adafb',
            fontSize: '#2rem',
            border: 'none',
          }"
          :cell-style="{
            textAlign: 'center',
            background: '#020e36',
            color: '#ffffff',
            border: 'none',
          }"
          height="620"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="dataSetName" label="数据集名称" width="130">
          </el-table-column>
          <el-table-column label="数据集类型" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.dataSetType == 1" class="span-green">{{
                dataSetTypeDict[scope.row.dataSetType]
              }}</span>
              <span
                v-else-if="scope.row.dataSetType == 2"
                class="span-skyblue"
                >{{ dataSetTypeDict[scope.row.dataSetType] }}</span
              >
              <span v-else class="span-lilac">{{
                dataSetTypeDict[scope.row.dataSetType]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="fileName" label="数据文件名" width="180">
          </el-table-column>
          <el-table-column prop="dataSetPath" label="数据文件路径" width="350">
          </el-table-column>
          <el-table-column prop="fileSize" label="数据大小" width="150">
          </el-table-column>
          <el-table-column prop="remark" label="数据集描述" width="400">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span class="span-edit" @click="editTask(scope.row)"></span>
              <span
                class="span-delete"
                @click="deleteOneTask(scope.row)"
              ></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="display-table-pagination">
        <div class="pagination-position">
          <span>{{ `共${total}条` }}</span>
          <span class="prev" @click="prevPage">上一页</span>
          <el-input class="page-input" v-model="currentPage"></el-input>
          <span class="next" @click="nextPage">下一页</span>
          <span class="total-page">{{ `${currentPage}/${totalPage}` }}</span>
          <span class="jumpTo">跳转至</span>
          <el-input class="page-input" v-model="jumpPage"></el-input>
          <span class="jump" @click="jumpQueryPage">跳转</span>
        </div>
      </div>
    </div>

    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :close-on-click-modal="true"
      :show-close="false"
      custom-class="empty-dialog"
      append-to-body
      width="40%"
      height="auto"
      top="25vh"
    >
      <EditTestDataset
        :rowData="rowData"
        @closeDialog="closeDialog"
        @updateDataSet="updateDataSet"
      ></EditTestDataset>
    </el-dialog>

    <el-dialog
      v-if="addFileVisible"
      :visible.sync="addFileVisible"
      :close-on-click-modal="true"
      :show-close="false"
      custom-class="empty-dialog"
      append-to-body
      width="40%"
      height="auto"
      top="25vh"
    >
      <AddFile
        @closeDialog="closeDialog"
        @addResourceData="addResourceData"
      ></AddFile>
    </el-dialog>

    <el-dialog
      v-if="callSyncTaskdialogVisible"
      :visible.sync="callSyncTaskdialogVisible"
      :close-on-click-modal="true"
      :show-close="false"
      custom-class="empty-dialog"
      append-to-body
      width="40%"
      height="auto"
      top="25vh"
    >
      <CallSyncTask
        type="数据集管理"
        @closeDialog="closeDialog"
        @sendData="callSyncTask"
      ></CallSyncTask>
    </el-dialog>
  </div>
</template>

<script>
import {
  addResourceData,
  getDataTaskInfo,
  updateDataSet,
  deleteDataSet,
  syncDataSet,
} from "@/api/testDatasetManagement";
import EditTestDataset from "@/views/comBusinessCfg/components/EditTestDataset.vue";
import AddFile from "@/views/comBusinessCfg/components/AddFile.vue";
import CallSyncTask from "@/views/taskArrange/components/CallSyncTask.vue";
export default {
  name: "taskArrangement",
  data() {
    return {
      searchData: {
        pageNum: 1,
        pageSize: 10,
        dataSetName: "", //数据集名称
        dataSetType: "", // 数据集类型，1：话音，2：数据，3：视频
        fileName: "", // 数据文件名
      },
      tableData: [],
      multipleSelection: [],
      /* 字典项 */
      dataSetTypeDict: {
        1: "话音",
        2: "数据",
        3: "视频",
      },
      // 编辑的当前数据
      rowData: {},
      // 当前页
      currentPage: 1,
      // 总条数
      total: 0,
      // 总页数
      totalPage: 0,
      // 跳转页
      jumpPage: 1,
      selectedIds: [], // 用来保存选中的 ID 数组
      // 任务定义弹窗
      dialogVisible: false,
      // 添加文件弹窗
      addFileVisible: false,
      // 同步弹窗
      callSyncTaskdialogVisible: false,
    };
  },
  props: {},
  components: { EditTestDataset, AddFile, CallSyncTask },
  methods: {
    // 多选框操作，
    handleSelectionChange(selection) {
      // 清空已选中的 ID 数组
      this.selectedIds = [];
      // 将当前选中的所有 ID 放入 selectedIds 数组中
      selection.forEach((item) => {
        this.selectedIds.push(item.id);
      });
    },
    // 搜索按钮
    searchTask() {
      this.searchData.pageNum = this.currentPage;
      // this.searchData.pageSize = this.totalPage;
      this.getTaskInfo(this.searchData);
    },
    // 编辑按钮
    editTask(row) {
      this.rowData = {};
      this.rowData = row;
      this.dialogVisible = true;
    },

    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
      this.addFileVisible = false;
      this.callSyncTaskdialogVisible = false;
    },
    // 删除一个（按钮）
    deleteOneTask(row) {
      console.log("删除", row.id);
      this.deleteTask([row.id]);
    },
    // 删除多组
    deleteTaskArr() {
      console.log("删除", this.selectedIds);
      this.deleteTask(this.selectedIds);
    },
    // 任务定义，添加
    updateDataSet(datasetForm) {
      console.log("datasetForm", datasetForm);
      updateDataSet(datasetForm.id, datasetForm.dataSetName, datasetForm.remark)
        .then((res) => {
          const code = res.code;
          if (code == 200) {
            this.$message.success("修改成功");
            this.closeDialog();
            this.getTaskInfo(this.searchData);
          } else {
            this.$message.error("修改失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 打开添加文件弹窗
    openFileDialog() {
      // 清空进度值
      this.$store.commit("commonData/UPLOAD_PERCENT", 0);
      this.addFileVisible = true;
    },
    // 文件弹窗保存按钮
    addResourceData(resource, fileList) {
      addResourceData(
        resource.dataSetName,
        resource.dataSetType,
        resource.remark,
        fileList
      )
        .then((res) => {
          const code = res.code;
          if (code == 200) {
            this.$message.success("新增数据集信息成功");
          } else {
            // this.$message.error("新增数据集信息失败");
          }
          // 查询数据集表格数据
          this.getTaskInfo(this.searchData);
          this.closeDialog();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 同步弹窗
    addCallSyncTask() {
      this.callSyncTaskdialogVisible = true;
    },
    // 同步
    callSyncTask(form) {
      // 注意要String处理
      syncDataSet(this.selectedIds, form.remoteAddress)
        .then((res) => {
          console.log(res);
          const msg = res.data.msg;
          if (msg == "成功") {
            this.$message.success("任务同步" + msg);
          } else {
            // this.$message.error("查询测试任务信息" + msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除数据的接口
    deleteTask(deleteArr) {
      // 注意要String处理
      deleteDataSet(deleteArr)
        .then((res) => {
          const code = res.code;
          if (code == 200) {
            this.$message.success("删除数据集信息成功");
          } else {
            this.$message.error("删除数据集信息失败");
          }
          // 查询数据集表格数据
          this.getTaskInfo(this.searchData);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查询数据，搜索，下一页
    getTaskInfo(params) {
      getDataTaskInfo(params)
        .then((res) => {
          const data = res.rows;
          const code = res.code;
          if (code == 200) {
            // this.$message.success("查询数据集信息成功");
          } else {
            // this.$message.error("查询数据集信息失败");
          }
          if (data != null) {
            this.tableData = data;
            this.total = res.total;
            this.totalPage = Math.ceil(res.total / 10);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // prevPage上一页
    prevPage() {
      if (this.currentPage == 1) {
        return;
      }
      this.currentPage--;
      this.searchData.pageNum = this.currentPage;
      // this.searchData.pageSize = this.totalPage;
      this.getTaskInfo(this.searchData);
    },
    // nextPage下一页
    nextPage() {
      this.currentPage++;
      this.searchData.pageNum = this.currentPage;
      // this.searchData.pageSize = this.totalPage;
      this.getTaskInfo(this.searchData);
    },
    // 跳转页面
    jumpQueryPage() {
      this.searchData.pageNum = this.jumpPage;
      this.currentPage = this.jumpPage;
      this.getTaskInfo(this.searchData);
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.getTaskInfo(this.searchData);
  },
  destroyed() {},
};
</script>

<style lang="scss" scoped>
.task-arrangement {
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  .action-bar {
    height: 5.25rem;
    line-height: 5.25rem;
    background: url("~@/assets/images/taskArrangement/border.png") no-repeat
      center center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: row;
    align-items: center;

    .bar-left {
      flex: 2;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      .bar-import,
      .bar-export,
      .bar-synch,
      .bar-add,
      .bar-delete {
        cursor: pointer;
        margin: 0 0.625rem;
        :hover {
          color: #1adafb;
        }
      }
      span {
        padding: 0.3125rem;
      }
    }
    .bar-right {
      flex: 5;
      display: flex;
      flex-direction: row;
      font-size: 1rem;
      .bar-test,
      .bar-testStartTime,
      .bar-testEndTime,
      .bar-dataSetType {
        display: flex;
        flex-direction: row;
        flex: 2;
      }
      .bar-search {
        flex: 1;

        :hover {
          color: #1adafb;
        }
        span {
          display: inline-block;
          text-align: center;
          margin-left: 0.625rem;
          width: 5rem;
          height: 2.5rem;
          line-height: 2.5rem;
          background: url("~@/assets/images/taskArrangement/search-button.png")
            no-repeat center center;
          background-size: 100% 100%;
          cursor: pointer;
        }
      }
    }
  }
  .display-table {
    flex: 1;
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    .display-table-content {
      height: 90%;
    }
    .display-table-pagination {
      flex: 1;
      position: relative;
      .pagination-position {
        position: absolute;
        right: 2.5rem;
        top: 0;
        font-size: 1rem;
        color: #fff;
        .prev,
        .next,
        .jump,
        .jumpTo {
          margin: 0 0.625rem;
          text-align: center;
          height: 1.875rem;
          line-height: 1.875rem;
          display: inline-block;
        }

        .prev,
        .next {
          cursor: pointer;
          background: url("~@/assets/images/taskArrangement/prev_next.png")
            no-repeat center center;
          background-size: 100% 100;
          width: 5rem;
        }
        .jump {
          cursor: pointer;
          background: url("~@/assets/images/taskArrangement/jump.png") no-repeat
            center center;
          background-size: 100% 100%;
          width: 3.75rem;
        }
        .page-input {
          width: 3.75rem;
        }
        .total-page {
          display: inline-block;
          width: 6.25rem;
          height: 1.875rem;
          line-height: 1.875rem;
          text-align: center;
        }
      }
    }
  }
  ::v-deep .el-input {
    width: 12.5rem;
  }

  ::v-deep .el-table--small th,
  .el-table--small td {
    padding: 0px 0px 0px 0px;
    height: 2.5rem;
  }
  .span-purple,
  .span-blue,
  .span-yellow,
  .span-skyblue,
  .span-green,
  .span-lilac {
    display: inline-block;
    width: 6rem;
    height: 2.125rem;
    line-height: 2.125rem;
    font-size: 1.125rem;
  }
  .span-purple {
    background: url("~@/assets/images/taskArrangement/background-purple.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-blue {
    background: url("~@/assets/images/taskArrangement/background-blue.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-yellow {
    background: url("~@/assets/images/taskArrangement/background-yellow.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-skyblue {
    background: url("~@/assets/images/taskArrangement/background-skyblue.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-green {
    background: url("~@/assets/images/taskArrangement/background-green.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-lilac {
    background: url("~@/assets/images/taskArrangement/background-lilac.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-start,
  .span-check,
  .span-edit,
  .span-delete {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0 0.625rem;
    cursor: pointer;
  }
  .span-start {
    background: url("~@/assets/images/taskArrangement/start.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
  .span-check {
    background: url("~@/assets/images/taskArrangement/check.png") no-repeat
      center center;
    background-size: 100% 100%;
    width: 1.5rem;
    height: 1.125rem;
  }
  .span-edit {
    background: url("~@/assets/images/taskArrangement/edit.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
  .span-delete {
    background: url("~@/assets/images/taskArrangement/delete.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
}
</style>
